<template>
	<view class="searchBox">
		<view class="box">
			<view class="list dis-flex flex-x-between flex-y-center" v-for="item in list" :key="item.id"
				@click="toDetail">
				<image :src="IMG_URL + item.user.avatar" class="avatar" />
				<view class="flex-box dis-flex flex-x-between flex-y-center lines">
					<view class="name flex-box">
						<view class="who">{{ item.user.username }}</view>
						<view class="time">Ta {{ item.createtime | handleData }}赞了你的帖子</view>
					</view>
					<view class="talk">
						<image :src="item.articles.picture | handlePic" class="likes_img" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	readNum,
	getLikeList
} from "../../api/im.js";
import st from "../../utlis/showtoast.js";
import {
	IMG_URL,
} from "../../config/app.js";

export default {
	data() {
		return {
			IMG_URL: IMG_URL,
			page: 1,
			total: 0,
			list: [],
			id: '',
		}
	},
	/**
	 * 刷新
	 */
	onPullDownRefresh() {
		this.onRefresh()
	},
	onReachBottom() {
		this.onLoadMore()
	},
	onLoad() {
		this.changeReadNumData()
		this.getData()
	},
	methods: {
		// 跳转详情
		toDetail() {
			uni.navigateTo({
				url: '/pages/hall/hallDetails?id=' + this.id,
			});
		},
		/**
		 * 刷新
		 */
		onRefresh() {
			this.page = 1;
			this.list = []
			this.getData()
		},
		/**
		 * 加载更多
		 */
		onLoadMore() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData()
			}
		},
		/**
		 * 网络请求
		 */
		async getData() {
			let res = await getLikeList(this.page)
			// console.log(res.data.data[0].articles.id)
			this.id = res.data.data[0].articles.id
			this.total = parseInt(res.data.total)
			if (this.page == 1) {
				this.list = res.data.data
			} else {
				this.list = [...this.list, ...res.data.data]
			}
		},
		/**
		 * 未读变已读
		 */
		async changeReadNumData() {
			await readNum("like_read")
		}
	},
	filters: {
		// 处理图片
		handlePic(pic) {
			if (pic == "") {
				return ""
			}
			let array = pic.split(",")
			return IMG_URL + array[0]
		},
		// 时间
		handleData(time) {
			let date = parseInt(new Date().getTime() / 1000) - parseInt(time)
			let second = parseInt(date % 60);
			let min = parseInt(parseInt(date / 60) % 60);
			let hour = parseInt(parseInt(date / 3600) % 24);
			let day = parseInt(parseInt(date / 3600 / 24) % 30);

			let dateObj = new Date(parseInt(time) * 1000);
			let year = dateObj.getFullYear();
			let month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
			let day2 = dateObj.getDate().toString().padStart(2, '0');
			let hour2 = dateObj.getHours().toString().padStart(2, "0");
			let min2 = dateObj.getMinutes().toString().padStart(2, "0");

			if (date < 60) {
				return second + "秒前"
			} else if (date < 3600) {
				return min + "分前"
			} else if (date < 24 * 3600) {
				return hour + "小时前"
			} else if (date < 2 * 24 * 3600) {
				return "昨天" + hour2 + ":" + min2
			} else {
				return year + "年" + month + "月" + day2 + "日" + " " + hour2 + ":" + min2
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.searchBox {
	width: 100%;

	.box {
		padding: 0 30rpx;

		.list {
			padding: 30rpx 0;
			border-bottom: 1px solid #EEE;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				overflow: hidden;
				border-radius: 50%;
				margin: 0 16rpx 0 0;
			}

			.name {
				.who {
					font-weight: bold;
					font-size: 32rpx;
					color: $uni-text-color;
				}

				.time {
					font-size: 24rpx;
					color: $uni-text-color-placeholder;
					margin-top: 20rpx;
				}
			}

			.talk {
				width: 110rpx;
				flex-shrink: 0;

				.likes_img {
					width: 110rpx;
					height: 110rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
}
</style>